<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../../img/favicon.ico" type="image/x-icon">
    <title>我的订单</title>
    <link href="../../layui/css/layui.css" rel="stylesheet">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        h1 {
            color: #4CAF50;
            text-align: center;
        }

        .order-details {
            margin-top: 20px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
            margin-top: 20px;
        }

        th, td {
            border: 1px solid #dddddd;
            /*text-align: left;*/
            padding: 8px;
        }

        th {
            background-color: #4CAF50;
            color: white;
        }

    </style>

</head>
<body>
<h1>我的订单</h1>
<div class="order-details">
    <table id="order-table">
        <thead>

        <tr>
            <th>订单编号</th>
            <th>订单生成时间</th>
            <th>购买人信息</th>
            <th>总价</th>
            <th>订单状态</th><!-- Combined Customer Details -->
        </tr>
        </thead>
        <tbody id="nav">

        </tbody>
        <script id="productTpl" type="text/html">
            {{# layui.each(d.data, function(index, item){ }}
            <tr>
                <td id="order-number">{{item.id}}</td>
                <td id="order-date">{{item.ctime}}</td>
                <td id="customer-details">{{item.state}}</td>
                <td id="total-price">{{item.price}}</td>
                <td id="details">{{item.ptime}}</td>
            </tr>
            {{# }); }}
        </script>
        <!--            <td id="order-number"></td>-->
        <!--            <td id="order-date"></td>-->
        <!--            <td id="customer-details"></td>-->
        <!--            <td id="total-price"></td>-->
        <!--            <td id="details"></td>&lt;!&ndash; Combined Customer Details &ndash;&gt;-->
    </table>
</div>
<script src="../../layui/layui.js"></script>
<script>
    layui.use(['element', 'layer', 'util'], function () {
        // var element = layui.element;
        var layer = layui.layer;
        // var util = layui.util;
        var laytpl = layui.laytpl;
        var $ = layui.jquery;
        var $ = layui.$;

        $.ajax({
            url: '/order/orders', // 替换为后端接口地址
            type: 'GET',
            success: function (data) {
                var getTpl = $("#productTpl").html();//html()是把模板放入頁面
                $("#nav").empty();
                laytpl(getTpl).render(data, function (str) {
                    // $("#nav").html(str);
                    $("#nav").append(str);
                });


            },
            error: function () {
                layer.alert("请先登录后再访问", {
                    title: "错误信息",
                    icon: 2
                }, function () {
                    location.href = "../login.html";
                });
            }
        });
    });
</script>
</body>
</html>